<template>
  <div class="liveBox">
    <img :src="live.cover_url" alt="">
    <div class="title">{{live.name}}</div>
    <div class="username">{{live.creator_username}}</div>
    <div class="info">
        <div class="num">--</div>
        <div class="status">暂无直播</div>
    </div>
  </div>
</template>

<script>
export default {
    props:['live']
}
</script>

<style lang="stylus" scoped>
.liveBox
    width calc(50vw - 0.22rem)
    margin 0.05rem
    position relative
    >img 
        overflow hidden
        border-radius 0.04rem
        background-repeat no-repeat
        background-position 50%
        background-size 100%
        width 100%
        height calc(50vw - 0.22rem)
    .title
        width 100%
        white-space nowrap
        text-overflow ellipsis 
        overflow hidden
        margin-top 0.05rem
        color #3d3d3d
        font-size .14rem
    .username
        margin-bottom .1rem
        color #757575
        font-size .12rem
        line-height .18rem
        width 100%
        white-space nowrap
        text-overflow ellipsis 
        overflow hidden
    .info
        display flex
        position absolute
        top calc(50vw - .52rem)
        right 0
        left 0
        align-items center
        justify-content space-between
        height .3rem
        overflow hidden
        background linear-gradient(0deg,rgba(0,0,0,.5),transparent)
        .num
            height .18rem
            margin-left .1rem
            color #ffffff
            font-size .1rem
            line-height .18rem
            &:before
                background-position -0.44rem -0.14rem
        .num:before,.status:before
            content ""
            display inline-block
            width .11rem
            height 0.09rem
            margin-right 0.04rem
            background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
            background-size 0.56rem 0.55rem
        .status
            width .76rem
            height .18rem
            border-radius 0.09rem 0 0 0.09rem
            background-color #757575
            color #ffffff
            font-size .1rem
            line-height .18rem
            text-align center
            &:before
                background-position -0.43rem -0.44rem
</style>